{extend name="Index/index" /}
{block name="main"}
<!-- Start right content -->

<!---->
{css href="/static/index/reset.css"}


<div class="content-page">

    <div class="content">

        <div class="page-heading">
            <h1><i class='fa fa-table'></i>用户管理</h1>
            <h3>用户列表</h3></div>

        <div class="row">

            <div class="col-md-12">
                <div class="widget">
                    <div class="widget-header transparent">
                        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">搜索
                        </button>

                        <!-- Modal -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">

                                    <form action="{:url('admin/user/search')}" method="post">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">搜索角色</h4>
                                        </div>
                                        <div class="modal-body">
                                            <span style="color: black;">角色名:<input type="text" name="search" placeholder="search..."></span>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                                            <button type="submit" class="btn btn-success">确定</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-content">
                        <div class="table-responsive">
                            <table data-sortable class="table">
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>所属角色</th>
                                    <th>操作</th>
                                    {volist name="list" id="v"}
                                <tr>
                                    <td>{$v.id}</td>
                                    <td>{$v.username}</td>
                                    <td>
                                        {volist name="v.role" id="val"}
                                        <span style="color:#999">{$val}</span>
                                        &nbsp;
                                        {/volist}
                                    </td>
                                    <td>
                                        <a href="{:url('admin/user/edit',['id'=>$v['id']])}" class="btn btn-warning ">修改</a>
                                        <button class="btn btn-danger del-btn" data-id="{$v.id}">删除</button>

                                        <a href="{:url('admin/user/rolelist',['id'=>$v['id']])}" class="btn btn-success" data-dismiss="modal">分配角色</a>
                                    </td>
                                </tr>
                                {/volist}
                                </tr>
                                </thead>

                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer Start -->
        <footer>
            Huban Creative &copy; 2014
            <div class="footer-links pull-right">
                <a href="#">About</a><a href="#">Support</a><a href="#">Terms of Service</a><a href="#">Legal</a><a
                    href="#">Help</a><a href="#">Contact Us</a>
            </div>
        </footer>
        <!-- Footer End -->
    </div>
    <!-- ============================================================== -->
    <!-- End content here -->
    <!-- ============================================================== -->

</div>
<!-- End right content -->
{js href="/static/index/js/jquery.min.js"}

{js href="/static/index/js/toastr.min.js"}

<script>
    $(function () {
        // 触发删除用户
        $('.del-btn').click(function () {
            var ac_id = $(this).attr('data-id');
            //                 console.log('删除操作,ID为: ' + ac_id);
            if (confirm('您确定要 [ 删 除 ] 该用户吗?')) {
                var obj = $(this).parents('tr');

                delAjax(ac_id, obj); // 执行AJAX删除

            }
        });
    });

    toastr.options = {
        closeButton: true,// 是否显示关闭按钮
        progressBar: true,// 实现显示计时条
        timeOut: "3000",// 自动关闭时间
        positionClass: "toast-bottom-left"// 提示位置
        // positionClass: "toast-top-full-width"// 提示位置
        // toast-top-full-width 顶端，宽度铺满整个屏幕
        // toast-top-right  顶端右边
    };

    function delAjax(id, obj) {
        $.ajax({
            type: 'delete',
            url: '/admin/user/delete/id/' + id + '.html',
            dataType : 'json',
            success : function (data){

                if (data.status) {
                    toastr.success(data.info);
                    obj.remove();
                } else {
                    toastr.error(data.info);
                }
            },
            error : function () {
                alert('AJAX执行失败!');
            }
        });
    }

</script>
{/block}